<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>001</li>
      <li>002</li>
      <li>003</li>
    </ul>
    <script>
      /* 本案例需求:  将li身上的事件委托给ul , 点击哪个li，哪个li背景变红色
       (1)请找出下列代码产生的bug（注意此处有2个bug）
           如何找出来的?
           原因分析:
       (2)如果想要实现正确的需求,应该如何实现
    */
      // const ul = document.querySelector('ul')
      // ul.addEventListener('click', function (e) {
      //   if (e.target.tagName === 'li') {
      //     this.style.backgroundClolor = 'red'
      //   }
      // })

      const ul = document.querySelector("ul")
      ul.addEventListener("click", function (e) {
        if (e.target.tagName === "LI") {
          e.target.style.backgroundColor = "red"
        }
      })
    </script>
  </body>
</html>
